<!DOCTYPE html>
<html>
<head>
	<title>侧边导航练习</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		font-size: 12px;
		line-height: 1.7;
	}
	li{
		list-style: none;
	}
	#content{
		width: 800px;
		margin: 0 auto;
		padding:20px;
	}
	#content h1{
		color: #0088bb;
	}
	#content .item{
		padding: 20px;
		margin-bottom: 20px;
		border: 1px dotted #0088bb;
	}
	#content .item h2{
		font-weight: bold;
		font-size: 16px;
		border-bottom: 2px solid #0088bb;
		margin-bottom: 10px;
	}
	#content .item li{
		display: inline;
		margin-right: 10px;
	}
	#content .item li a img{
		width: 230px;
		height: 230px;
		border: none;
	}
	#menu{
		position: fixed;
		top: 100px;
		left: 50%;
		margin-left: 400px;
	}
	#menu ul li a{
		width: 80px;
		height: 50px;
		line-height: 50px;
		margin: 5px 0;
		color: #333;
		text-decoration: none;
		text-align: center;
		display: block;
		font-size: 14px;
		font-weight: bold;
	}
	#menu ul li a:hover,
	#menu ul li a.current{
		color: #fff;
		background: #0088bb;
	}
		
	/*ie 6*/
	*html,*html body{
		background-image: url(about:blank);
		background-attachment: fixed;
	}
	*html #menu{
		position: absolute;
		bottom: auto;
		top: expresssion(((e.document.documentElement.scrollTop)?e;element.body.scrollTop)+100+'px');
	}

	</style>
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(window).scroll(function(){
				var items = $("#content").find(".item");
				var menu = $("#menu");
				var top = $(document).scrollTop();
				var currentId="";
				items.each(function(){
					var m =$(this);
					if (top>m.offset().top - 300) {
						currentId = "#"+m.attr("id");
					}else{
						return false;
					}
				});

				var currentLink = menu.find(".current");
				if (currentId && currentLink.attr("href") != currentId) {
					currentLink.removeClass("current");
					menu.find("[href="+currentId+"]").addClass("current");
				}
			});
		});
	</script>
</head>
<body>

<div id="menu">
	<ul>
		<li><a href="#item1">1F 男装</a></li>
		<li><a href="#item2">2F 女装</a></li>
		<li><a href="#item3">3F 美妆</a></li>
		<li><a href="#item4">4F 数码</a></li>
		<li><a href="#item5">5F 母婴</a></li>
	</ul>
</div>
<div id="content">
	<h1>地狗购物网</h1>

	<div id="item1" class="item">
	<h2>1F 男装</h2>
	<ul>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		<li><a href="#"><img src="1F.jpg" alt=""></a></li>
	</ul>
	</div>
	<div id="item2" class="item">
	<h2>2F 女装</h2>
	<ul>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		<li><a href="#"><img src="2F.jpg" alt=""></a></li>
	</ul>
	</div>
	<div id="item3" class="item">
	<h2>3F 美妆</h2>
	<ul>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		<li><a href="#"><img src="3F.jpg" alt=""></a></li>
	</ul>
	</div>
	<div id="item4" class="item">
	<h2>4F 数码</h2>
	<ul>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
		<li><a href="#"><img src="4F.png" alt=""></a></li>
	</ul>
	</div>
	<div id="item5" class="item">
	<h2>5F 母婴</h2>
	<ul>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		<li><a href="#"><img src="5F.jpg" alt=""></a></li>
	</ul>
	</div>

</div>
</body>
</html>